/*
 * @Date: 2022-03-29 12:56:39
 * @LastEditors: fenglan
 * @LastEditTime: 2022-04-02 16:07:56
 * @FilePath: /payment-1/pay/src/pages/PayGround/PayGroundRecord.jsx
 */

import React, { useState } from 'react'
import Tab from "../../components/Tabs";
import { Row, Col, Input, Button, ConfigProvider, Form, Select, DatePicker, Table, Modal ,message} from "antd";
import zhCN from 'antd/es/locale/zh_CN'
import styles from './index.module.css'
import { SearchOutlined } from '@ant-design/icons'
import Export from '../../components/Export';
import HocBUtton from '../../components/HOC/HocButton/CommonButton';
const { Option } = Select
const { RangePicker } = DatePicker
export default function PayGroundRecord() {
  const [isModalVisible, setIsModalVisible] = useState(false);
  const onSubmit = (fieldsValue) => {
    const rangeValue = fieldsValue['起止时间']
    const values = {
      ...fieldsValue,
      '起止时间': [rangeValue[0].format('YYYY-MM-DD'), rangeValue[1].format('YYYY-MM-DD')]
    }
    console.log('Received values of form: ', values);
  }
  const data = [
    {
      key: '1',
      type: '商户',
      pay_type: <span className={styles.pay}>充值</span>,
      serial_number: 'SHCZ202203300948468356192',
      goods_number: 'test',
      goods_name: '我是商户',
      goods_number: '2022012756368828',
      actual_amount: 299,
      before_moneny: 1053.62,
      change_moneny: 23,
      after_moneny: 2349,
      service_moneny: 23,
      operator: '张三',
      operator_time: '2022-03-30 12:30:07',
    },
    {
      key: '2',
      type: '商户',
      price: 32,
      pay_type: <span className={styles.pay}>充值</span>,
      serial_number: 'SHCZ202203300948468356192',
      goods_number: 'test',
      goods_name: '我是商户',
      goods_number: '2022012756368828',
      actual_amount: 299,
      before_moneny: 1053.62,
      change_moneny: 23,
      after_moneny: 2349,
      service_moneny: 23,
      operator: '张三',
      operator_time: '2022-03-30 12:30:07',
    },
    {
      key: '3',
      type: '商户',
      pay_type: <span className={styles.pay}>充值</span>,
      serial_number: 'SHCZ202203300948468356192',
      goods_number: 'test',
      goods_name: '我是商户',
      goods_number: '2022012756368828',
      actual_amount: 299,
      before_moneny: 1053.62,
      change_moneny: 23,
      after_moneny: 2349,
      service_moneny: 23,
      operator: '张三',
      operator_time: '2022-03-30 12:30:07',
    },
    {
      key: '4',
      type: '商户',
      pay_type: <span className={styles.pay}>充值</span>,
      serial_number: 'SHCZ202203300948468356192',
      goods_number: 'test',
      goods_name: '我是商户',
      goods_number: '2022012756368828',
      actual_amount: 299,
      before_moneny: 1053.62,
      change_moneny: 23,
      after_moneny: 2349,
      service_moneny: 23,
      operator: '张三',
      operator_time: '2022-03-30 12:30:07',
    },
    {
      key: '5',
      type: '商户',
      pay_type: <span className={styles.pay}>充值</span>,
      serial_number: 'SHCZ202203300948468356192',
      goods_number: 'test',
      goods_name: '我是商户',
      goods_number: '2022012756368828',
      actual_amount: 299,
      before_moneny: 1053.62,
      change_moneny: 23,
      after_moneny: 2349,
      service_moneny: 23,
      operator: '张三',
      operator_time: '2022-03-30 12:30:07',
    },
    {
      key: '6',
      type: '商户',
      pay_type: <span className={styles.pay}>充值</span>,
      serial_number: 'SHCZ202203300948468356192',
      goods_number: 'test',
      goods_name: '我是商户',
      goods_number: '2022012756368828',
      actual_amount: 299,
      before_moneny: 1053.62,
      change_moneny: 23,
      after_moneny: 2349,
      service_moneny: 23,
      operator: '张三',
      operator_time: '2022-03-30 12:30:07',
    },
  ]
  const column = [
    {
      title: '类型',
      width: 100,
      dataIndex: 'type',
      sorter: (a, b) => a.type- b.type,
    },
    {
      title: '支付类型',
      width: 150,
      dataIndex: 'pay_type',
      sorter: (a, b) => a.pay_type- b.pay_type,
    },
    {
      title: '流水号',
      width: 300,
      dataIndex: 'serial_number',
    },
    {
      title: '商品名称',
      width: 150,
      dataIndex: 'goods_name',
    },
    {
      title: '商户号',
      width: 200,
      dataIndex: 'goods_number',
    },
    {
      title: '实际金额',
      width: 100,
      dataIndex: 'actual_amount',
    },
    {
      title: '变动前金额',
      width: 150,
      dataIndex: 'before_moneny',
    },
    {
      title: '变动金额',
      width: 100,
      dataIndex: 'change_moneny',
    },
    {
      title: '变动后金额',
      width: 100,
      dataIndex: 'after_moneny',
    },
    {
      title: '手续费',
      width: 100,
      dataIndex: 'service_moneny',
    },
    {
      title: '操作人',
      width: 100,
      dataIndex: 'operator',
    },
    {
      title: '操作时间',
      width: 150,
      dataIndex: 'operator_time',
    },
    {
      title: '操作',
      width: 100,
      dataIndex: 'button',
      fixed: 'right',
      render: (__, value) => (
        <ConfigProvider locale={zhCN}>
          <HocBUtton handlerClick={() => { Show(__, value) }} buttonName='冲正' className='red' size='small'></HocBUtton>
          <Modal title="信息" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel} mask={false}>
            <p>是否冲正？</p>
          </Modal>
        </ConfigProvider>
      )
    },
  ]
  const [pagination, setpagination] = useState({
    defaultCurrent: 1,
    total: 6,
    pageSize: 5,
    Num: 0,
    showQuickJumper: 'showQuickJumper',
    onChange: function onchange(page, ps) {
      console.log(page, ps);
    }
  })
  const Show = (__, value) => {
    setIsModalVisible(true)
    console.log(__, value);
  }
  const handleOk = () => {
    // message.success('冲正成功！');
    message.error('余额不足');
    setIsModalVisible(false);
  };
  const handleCancel = () => {
    setIsModalVisible(false);
  };
  return (
    <div>
      <Tab title={" 入金记录"} />
      <ConfigProvider locale={zhCN}>
        <Row className={styles.requestSearch}>
          <Form layout="inline" onFinish={onSubmit}>
            <Col span={4}>
              <Form.Item name='account'>
                <Input placeholder='流水号' />
              </Form.Item>
            </Col>
            <Col span={4}>
              <Form.Item name='user'>
                <Select placeholder="商户">
                  <Option value="1">o1</Option>
                  <Option value="2">o2</Option>
                  <Option value="3">o3</Option>
                </Select>
              </Form.Item>
            </Col>
            <Col span={4}>
              <Form.Item name='status'>
                <Select placeholder="卡商">
                  <Option value="1">o1</Option>
                  <Option value="2">o2</Option>
                  <Option value="3">o3</Option>
                </Select>
              </Form.Item>
            </Col>
            <Col span={4}>
              <Form.Item name='card'>
                <Select placeholder="支付类型">
                  <Option value="1">o1</Option>
                  <Option value="2">o2</Option>
                  <Option value="3">o3</Option>
                </Select>
              </Form.Item>
            </Col>
            <Col span={5}>
              <Form.Item name='起止时间' >
                <RangePicker locale={zhCN} />
              </Form.Item>
            </Col>
            <Col span={1} >
              <Form.Item  >
                <Button type="primary" htmlType="submit" icon={<SearchOutlined />} className={styles.mr}>
                  搜索
                </Button>
              </Form.Item>
            </Col>
            <Col span={1} offset={1}>
              <Form.Item  >
                <Export data={data} header={column} fileName='file.xlsx' />
              </Form.Item>
            </Col>
          </Form>
        </Row>
        <Row>
          <Col span={24}>
            <Table pagination={pagination} dataSource={data} columns={column} title={() =>
              <Row>
                <Col span={2} className={styles.tableTitle}>充值总金额</Col>
                <Col span={6}><Input disabled placeholder='5125830.44/5125830.44' /></Col>
                <Col span={2} className={styles.tableTitle}>充值手续费</Col>
                <Col span={6}><Input disabled placeholder='13951' /></Col>
              </Row>} scroll={{ x: 1300 }} />
          </Col>
        </Row>
      </ConfigProvider>
    </div>
  )
}
